<template>
  <div>
    <!-- 调用根模块的数据 -->
    <p>{{$store.state.userName}}</p>
    <p>{{$store.getters.newName}}</p>
    <button @click="mutationsFn">mutationsFn</button>
    <ul>
        <li v-for="(item,index) in $store.getters.boys" :key="index">{{item.name}}</li>
    </ul>
    <div>
        <label for="A">模块A的userName ----{{$store.state.a.userName}}</label>
        <label for="AG">模块A的getters----{{$store.getters.newName2}}</label>
    </div>
    <div>
        <label for="B">模块B的userName----{{$store.state.b.userName}}</label>
    <label for="BG">模块B的getters----{{$store.getters['b/changeName']}} ---注意有命名空间['模块名/getters方法名']</label>
    <button @click="$store.commit('b/updateUserName')">修改username</button> ---注意有命名空间('模块名/getters方法名')
    <button @click="$store.dispatch('b/updateUserName')">异步修改username</button>
    </div>
  </div>
</template>
<script>
import { useStore } from 'vuex'
export default {
  name: 'storeExercises',
  setup () {
    // 使用仓库
    const store = useStore()
    //   使用根模块state的数据
    console.log(store.state.userName)
    // 调用getters的数据
    console.log(store.getters.newName)
    console.log(store.getters.boys)
    const mutationsFn = () => {
      // 调用根模块mutations
    //   store.commit('updateName')
      // 调用根模块actions,隔一秒钟调用了mutations
      store.dispatch('updateName')
    }
    return { mutationsFn }
  }
}
</script>
